<template>
    <div class="container">
        <!-- 搜索 -->
        <div style="margin: 10px 0;">
            <el-form inline="true">
                <el-form-item label="查询类型">
                    <el-select v-model="searchType" placeholder="请选择查询类型">
                        <el-option label="ISBN" value="isbn"></el-option>
                        <el-option label="图书名称" value="bookName"></el-option>
                        <el-option label="作者" value="author"></el-option>
                        <el-option label="类别" value="category"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="查询目标">
                    <el-input v-model="searchTarget" placeholder="请输入查询目标" clearable>
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="margin-left: 1%" @click="load" size="small">
                        <svg-icon iconClass="search" />
                        查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="danger" @click="clear">重置</el-button>
                </el-form-item>
            </el-form>
        </div>


        <ul class="book-grid">
            <li class="book-card" v-for="book in books" :key="book.id" @click="selectBook(book)"
                style="background-color: #a08b72">
                <div class="book-info">
                    <h2 class="book-title">{{ book.bookName }}</h2>
                    <p class="book-author">By {{ book.author }}</p>
                </div>
            </li>

            <!-- 浮动的大卡片 -->
            <li v-if="selectedBook" class="book-card floating-card" @click="deselectBook" style="background-color: #a08b72">
                <div class="book-info">
                    <h2 class="book-title">{{ selectedBook.bookName }}</h2>
                    <p class="book-author">作者：{{ selectedBook.author }}</p>
                    <p class="book-author">出版社：{{ selectedBook.press }}</p>
                    <p class="book-author">类型：{{ selectedBook.category }}</p>
                    <p class="book-author">ISBN：{{ selectedBook.isbn }}</p>
                    <p class="book-author">库存：{{ selectedBook.inventory }}</p>
                    <el-button v-if="selectedBook.inventory" type="info" plain
                        @click="barrowBook(selectedBook.id)">借阅</el-button>
                </div>
            </li>

            <!-- 用于模糊背景的覆盖层 -->
            <li v-if="selectedBook" class="overlay" @click="deselectBook"></li>
        </ul>
    </div>
</template>


<script setup>
import { onMounted, ref } from 'vue';
import request from "../utils/request.js";
import { useMainStore } from "../store/index.js";
import { ElMessage } from 'element-plus'

const store = useMainStore();
const loading = ref(false);
const currentPage = ref(1);
const searchType = ref('');
const searchTarget = ref('');
const books = ref([
]);
const selectedBook = ref(null);
const selectBook = (book) => {
    selectedBook.value = book;
};
const deselectBook = () => {
    selectedBook.value = null;
};

onMounted(() => {
    fetchData()
})

async function fetchData() {
    try {
        loading.value = true
        let param = {
            page: currentPage.value,
            pageSize: 100
        }
        if (searchType.value && searchTarget.value) {
            param[searchType.value] = searchTarget.value
        }
        request.get('/books', {
            params: param
        }).then((res) => {
            loading.value = false
            books.value = res.data.rows
            console.log(books.value)
        })
    } catch (error) {
        console.log(error)
    }
}

const load = () => {
    fetchData()
}

const clear = () => {
    searchType.value = ''
    searchTarget.value = ''
    load()
}

const barrowBook = (id) => {
    request.post('/books', {
        userName: store.userName,
        bookName: selectedBook.value.bookName,
        isbn: selectedBook.value.isbn,
        author: selectedBook.value.author,
    })
        .then((res) => {
            console.log(res)
            if (res.code == 1) {
                ElMessage({
                    message: '借阅成功',
                    type: 'success',
                })
            } else {
                ElMessage.error('借阅失败')
            }
        })
        .catch((err) => {
            console.log(err)
            ElMessage.error('请求失败')
        })
    load();
}
</script>

<style lang="scss" scoped>
.container{
    margin-top: 10px;
}

.book-grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // do not limit the number of cards per row
    row-gap: 20px; // use row-gap to keep vertical gap between rows
    margin-top: 30px;
    padding-left: 30px;
    background-color: #eeeeee;
    overflow-y: scroll;
}

.book-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; // align the content to the bottom
    align-items: flex-start; // align the content to the left
    // width: 60%;
    height: 200px;
    padding: 1.5rem;
    margin: 0.8rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
    white-space: nowrap;
    text-overflow: ellipsis;


    &:hover {
        cursor: pointer; // add a pointer cursor
    }
}

.book-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; // align the text to the left
}

.book-title {
    font-size: 2rem; // make the title even larger
    margin-bottom: 1rem;
}

.book-author {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.book-description {
    font-size: 0.9rem;
}

.floating-card {
    position: fixed;
    top: 50%;
    left: 50%;
    height: auto;
    width: auto;
    max-width: 80%;
    max-height: 80%;
    padding: 30px;
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 1000; // 浮动在其他内容之上
    background-color: white; // add a white background

}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px); // 对背景进行模糊处理
    z-index: 999; // 确保覆盖层位于内容之上但在表单之下
}
</style>